<div class="Section-messageBar" ng-if="vm.show_auditor_bar">
    <i class="fa fa-warning"></i>
    <span translate>System auditors have read-only permissions in this section.</span>
    <button class="Section-messageBar--close" ng-click="vm.closeMessageBar()"><i class="fa fa-times-circle"></i></button>
</div>

<div class="tab-pane" id="configuration-panel">
    <div ng-cloak id="htmlTemplate" class="Panel">
        <div class="Form-header">
            <div class="Form-title Form-title--uppercase" translate>CONFIGURE {{ BRAND_NAME }}</div>
        </div>
        <div class="row Form-tabRow">
            <div class="col-lg-12">
                <div class="Form-tabHolder"ng-class="{'Form-tabHolder--licenseSelected': vm.activeTab === 'license'}">
                    <div id="auth_tab"
                         class="Form-tab"
                         ng-click="vm.activeTabCheck('auth')"
                         ng-class="{'is-selected': vm.activeTab === 'auth' }"
                         translate>
                        Authentication
                    </div>
                    <div id="jobs_tab"
                         class="Form-tab"
                         ng-click="vm.activeTabCheck('jobs')"
                         ng-class="{'is-selected': vm.activeTab === 'jobs' }"
                         translate>
                        Jobs
                    </div>
                    <div id="system_tab"
                         class="Form-tab"
                         ng-click="vm.activeTabCheck('system')"
                         ng-class="{'is-selected': vm.activeTab === 'system' }"
                         translate>
                        System
                    </div>
                    <div id="ui_tab"
                         class="Form-tab"
                         ng-click="vm.activeTabCheck('ui')"
                         ng-class="{'is-selected': vm.activeTab === 'ui' }"
                         translate>
                        User Interface
                    </div>
                    <div id="license_tab"
                         class="Form-tab"
                         ng-show="vm.product === 'Tower'"
                         ng-click="vm.activeTabCheck('license')"
                         ng-class="{'is-selected': vm.activeTab === 'license' }"
                         translate>
                        License
                     </div>
                </div>
            </div>
        </div>
        <div ui-view="auth" ng-show="vm.activeTab === 'auth'"></div>
        <div ui-view="jobs" ng-show="vm.activeTab === 'jobs'"></div>
        <div ui-view="system" ng-show="vm.activeTab === 'system'"></div>
        <div ui-view="ui" ng-show="vm.activeTab === 'ui'"></div>
        <div ui-view="license" ng-show="vm.product === 'Tower' && vm.activeTab === 'license'"></div>
        <div id="FormModal-dialog"></div>
    </div>
</div>
